<template>
  <div class="amap-page-container">
    <div :style="{ width: '100%', height: '100%' }">
      <el-amap
        ref="map"
        :amap-manager="amapManager"
        :map-style="mapStyle"
        :show-label="showLabel"
        vid="amap"
        :zoom="zoom"
        class="amap-demo"
        :events="events"
        :center="center"
      >
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker.position"
          :events="marker.events"
          :vid="index"
          :icon="marker.icon"
          :offset="[-30, -30]"
        />
        <el-amap-info-window
          :position="currentWindow.position"
          :visible="currentWindow.visible"
          :content="currentWindow.content"
          @close="closeWin"
        />
      </el-amap>
    </div>
  </div>
</template>

<script>
import { AMapManager } from 'vue-amap'
const amapManager = new AMapManager() // 新建生成地图画布
export default {
  props: ['markers', 'currentWindow'],
  data() {
    return {
      center: [108.921, 34.226],
      mapStyle: 'amap://styles/a79a2643eb4631f5505eefb00e3f1f1a', // 使用的自定义地图样式，可以根据需求显示/隐藏内容，改变主题颜色等，具体的使用下面会写
      amapManager: amapManager,
      showLabel: false,
      lng: 0,
      lat: 0,
      zoom: 12,
      loaded: false,
      events: {
        init(o) {
          console.log(o.getCenter())
        },
        zoomchange: e => {
          console.log(e)
        },
        zoomend: e => {
          // 获取当前缩放zoom值
          console.log(this.$refs.map.$$getInstance().getZoom())
          console.log(e)
        },
        click: e => {
          //   alert('map clicked')
        }
      },
      markerEvent: {
        click: e => {
          console.log(e)
        }
      }
    }
  },
  mounted() {
    // console.log(this.markers)
    // this.markers = [
    //   {
    //     position: [121.59996, 31.197646]
    //   },
    //   {
    //     position: [110.205487, 25.246257]
    //   }
    // ]
  },
  methods: {
    req_post() {},
    closeWin() {
      console.log('guanbi')
    }
  },
  watch: {
    markers(position) {
      if (position && position.length > 0) {
        this.center = position[0].position
      }
    }
  },
}
</script>

<style scoped>
.amap-demo {
  height: 100% !important;
}
</style>
